<template>
	<view class="order">
		<view class="orderTop">
			<view class="searchView"><uni-search-bar @confirm="search" @input="input" placeholder="搜索框" :radius="100"></uni-search-bar></view>

			<view class="point" @click="pointClick(mapData.marker)">
				<uni-icons type="star" color="#AAAAAA" :size="22"></uni-icons>
				<text>{{ mapData.title }}</text>
				<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>

		<view class="flexBannerWrapper">
			<scroll-view scroll-y="true" class="scrllView">
				<view class="bannerInfo">
					<view class="sidebar" v-for="(item, index) in sidebar">
						<view class="iconsWraaper" @click="inconsClick(index, item)" :class="{ iconsWite: currentIndex === index }">
							<image :src="filtSrc(item)"></image>
							<view>
								<text class="iconsText">{{ item.name }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="bannerScrollView"  :scroll-into-view=scrollId scroll-with-animation="true">
				<view class="bannerInfoContent">
					<view class="bannerImgWrapper">
						<image class="titleImg" src="../../static/image/order/titleImg_03.jpg" mode=""></image>
						<image class="titleImg" src="../../static/image/order/titleImg_06.jpg" mode=""></image>
					</view>

					<view class="bannerDetail" id="xiCha">
						<view class="bannerTextTitle"><text class="bannerTitleInfo">喜茶实验室</text></view>
						<view class="bannerShopInfo" v-for="(item, index) in shopNameXiCha">
							<view class="shopInfoFlex">
								<view class="shopImgInfo"><image :src="filtImgSrc(item)" mode=""></image></view>
								<view class="shopTextInfo">
									<view class="ShopInfoTitle">
										<text>{{ item.title }}</text>
									</view>
									<view class="shopLable">
										<text class="grenn interval">{{ item.lable }}</text>
									</view>
									<view class="shopDetailInfo">
										<text>{{ item.description }}</text>
									</view>
									<view class="shopPriceFlex">
										<view class="shopPriceLeft">
											<text>￥{{ item.price }}</text>
										</view>
										<view class="iconsRight"><uni-icons type="plus-filled" size="19" color="#B8741A"></uni-icons></view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="bannerDetail" id="season">
						<view class="bannerTextTitle"><text class="bannerTitleInfo">当季限定</text></view>
						<view class="bannerShopInfo" v-for="(item, index) in shopNameSeason">
							<view class="shopInfoFlex">
								<view class="shopImgInfo"><image :src="filtImgSrc(item)" mode=""></image></view>
								<view class="shopTextInfo">
									<view class="ShopInfoTitle">
										<text>{{ item.title }}</text>
									</view>
									<view class="shopLable">
										<text class="grenn interval">{{ item.lable }}</text>
									</view>
									<view class="shopDetailInfo">
										<text>{{ item.description }}</text>
									</view>
									<view class="shopPriceFlex">
										<view class="shopPriceLeft">
											<text>￥{{ item.price }}</text>
										</view>
										<view class="iconsRight"><uni-icons type="plus-filled" size="19" color="#B8741A"></uni-icons></view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="bannerDetail" id="popupl">
						<view class="bannerTextTitle"><text class="bannerTitleInfo">人气必喝榜</text></view>
						<view class="bannerShopInfo" v-for="(item, index) in ShopNamePopupl">
							<view class="shopInfoFlex">
								<view class="shopImgInfo"><image :src="filtImgSrc(item)"  mode=""></image></view>
								<view class="shopTextInfo">
									<view class="ShopInfoTitle">
										<text>{{ item.title }}</text>
									</view>
									<view class="shopLable">
										<text class="grenn interval">{{ item.lable }}</text>
									</view>
									<view class="shopDetailInfo">
										<text>{{ item.description }}</text>
									</view>
									<view class="shopPriceFlex">
										<view class="shopPriceLeft">
											<text>￥{{ item.price }}</text>
										</view>
										<view class="iconsRight"><uni-icons type="plus-filled" size="19" color="#B8741A"></uni-icons></view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="bannerDetail" id="marker">
						<view class="bannerTextTitle"><text class="bannerTitleInfo">喜茶制冰</text></view>
						<view class="bannerShopInfo" v-for="(item, index) in ShopNameMarker">
							<view class="shopInfoFlex">
								<view class="shopImgInfo"><image :src="filtImgSrc(item)" mode=""></image></view>
								<view class="shopTextInfo">
									<view class="ShopInfoTitle">
										<text>{{ item.title }}</text>
									</view>
									<view class="shopLable">
										<text class="grenn interval">{{ item.lable }}</text>
									</view>
									<view class="shopDetailInfo">
										<text>{{ item.description }}</text>
									</view>
									<view class="shopPriceFlex">
										<view class="shopPriceLeft">
											<text>￥{{ item.price }}</text>
										</view>
										<view class="iconsRight"><uni-icons type="plus-filled" size="19" color="#B8741A"></uni-icons></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getmapData } from '@/api/mapInfo.js';
import dataSidebar from './sidbarData.js';
import { filtImgSrc } from './sidbarData.js';
import { getShopNameXiCha, getShopNameSeason, getShopNamePopupl, getShopNameMarker } from '@/api/order.js';
export default {
	data() {
		return {
			mapData: '',
			sidebar: '',
			shopNameXiCha: '',
			shopNameSeason: '',
			ShopNamePopupl: '',
			ShopNameMarker: '',
			currentIndex: 0,
			scrollId: ''
		};
	},
	onLoad() {
		this.getData();
		this.sidebar = dataSidebar.dataSidebar;
	},
	methods: {
		async getData() {
			// 获取map数据
			this.mapData = await getmapData().then(res => {
				return res.data.data;
			});
			//获取喜茶实验室商品数据
			this.shopNameXiCha = await getShopNameXiCha().then(res => {
				return res.data.data;
			});
			//获取季节限定商品
			this.shopNameSeason = await getShopNameSeason().then(res => {
				return res.data.data;
			});
			//获取受欢迎的商品
			this.ShopNamePopupl = await getShopNamePopupl().then(res => {
				return res.data.data;
			});
			//获取喜茶制作的商品
			this.ShopNameMarker = await getShopNameMarker().then(res => {
				return res.data.data;
			});
			console.log(this.shopNameXiCha, "data");
		},
		input() {
			console.log('搜索');
		},
		confirm() {
			console.log('搜索确认事件');
		},
		pointClick(marker) {
			uni.navigateTo({
				url: './stores/index?marker=' + encodeURIComponent(JSON.stringify(marker))
			});
		},
		filtSrc(value) {
			return value.url;
		},
		inconsClick(index, item) {
			this.currentIndex = index;
			this.scrollId = item.id
		},
		filtImgSrc(data) {
			switch (data.title) {
				case '芒芒甘露冰棒':
					return '../../static/image/order/11_03.jpg';
					break;
				case '火腿蛋可颂脆堡':
					return '../../static/image/order/11_07.jpg';
					break;
				case '夹心小方':
					return '../../static/image/order/11_11.jpg';
					break;
				case 'NFC芒芒汁':
					return '../../static/image/order/22_03.jpg';
					break;
				case '芒芒甘露椰椰冻':
					return '../../static/image/order/22_07.jpg';
					break;
				case '生打椰椰奶冻':
					return '../../static/image/order/22_11.jpg';
					break;
				case '生打椰椰芒':
					return '../../static/image/order/33_03.jpg';
					break;
				case '多肉葡萄':
					return '../../static/image/order/33_06.jpg';
					break;
				case '多肉芒芒甘露':
					return '../../static/image/order/33_10.jpg';
					break;
				case '芝芝梅梅':
					return '../../static/image/order/44_03.jpg';
					break;
				case '椰椰脆筒':
					return '../../static/image/order/44_07.jpg';
					break;
				case '芝芝脆筒':
					return '../../static/image/order/44_10.jpg';
					break;
				case '椰椰冻雪糕杯':
					return '../../static/image/order/44_13.jpg';
					break;
			}
		}
	}
};
</script>

<style scoped>
.searchView {
	margin: 5rpx 0 0 10rpx;
	width: 100%;
}
.point {
	margin-left: 30rpx;
}
.iconsWraaper {
	width: 150rpx;
	text-align: center;
	padding: 20rpx 0 10rpx 0;
	background-color: #f6f6f6;
}
.iconsWraaper image {
	width: 40rpx;
	height: 40rpx;
}
.iconsWite {
	background-color: #ffffff;
}
.iconsText {
	font-size: 25rpx;
}
.flexBannerWrapper {
	display: flex;
	margin-top: 50rpx;
}
.bannerDetail {
	margin-top: 40rpx;
	color: #7f7f7f;
}
.bannerInfo {
	display: flex;
	flex-wrap: wrap;
	width: 20%;
}
.bannerShopInfo {
	margin: 30rpx 25rpx 0 40rpx;
}
.bannerInfoContent {
	width: 635rpx;
	padding: 0rpx 20rpx 0 20rpx;
}
.bannerScrollView {
	/* height: calc(100vh - 365rpx); */
	height: 76vh;
}
.sidebar {
	display: inline-block;
}
.titleImg {
	width: 575rpx;
	height: 300rpx;
}
.shopInfoFlex {
	display: flex;
}
.shopImgInfo {
	margin-right: 45rpx;
	padding-top: 70rpx;
}
.shopImgInfo image {
	width: 61rpx;
	height: 85rpx;
}
.ShopInfoTitle {
	color: #393939;
	font-size: 35rpx;
	margin-bottom: 10rpx;
}
.interval {
	margin-right: 10rpx;
	font-size: 22rpx;
	padding: 5rpx 10rpx;
}
.grenn {
	background-color: #eeffe8;
	color: #70b309;
}
.normalColor {
	color: #a9a9a9;
	background-color: #e9e9e9;
}
.shopDetailInfo {
	margin-top: 20rpx;
	font-size: 25rpx;
}
.shopPriceFlex {
	display: flex;
	justify-content: space-between;
	padding: 0 10rpx 0 0;
	line-height: 60rpx;
}
.shopPriceLeft {
	color: #393939;
	font-size: 34rpx;
}
.scrllView {
	/* height: calc(100vh - 365rpx); */
	height: 76vh;
}
/deep/ .uni-searchbar__box {
	border-color: transparent;
}
</style>
